<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
<style>
#app {  display: flex;}

.my-list{
  flex: 1 1 50%;
  font-family: Arial;
  color: white;
  margin: 20px;
}
.my-list .title {
  background: #A93226;
  padding: 20px;
  font-weight: bold;
  font-size: 22px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.my-list .list {
  background: #34495E;
  padding: 20px;
  font-size: 16px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.my-list .list-item:not(:last-child) {
  padding-bottom: 20px;
}

.swatch {
  display: inline-block;
  width: 15px;
  height: 10px;
  margin-right: 8px;
}
</style>
</head>
<body>
    <h1> 作用域插槽 </h1>
    <div id="app">
        <!-- <soncom>
            <template slot-scope="scope">
                奔跑吧青春 {{scope.hero.nickname}}
            </template> 
        </soncom> -->

        <my-list :list="shapes" title="形状列表">
            <template slot-scope="scope">
                <div>
                    {{ scope.item.name }} --
                    ({{ scope.item.sides }} sides)
                </div>
            </template>
        </my-list>

        <my-list :list="colors" title="颜色列表">
            <template slot-scope="scope">
                <div class="swatch" 
                    :style="{ background:scope.item.hex }">  
                </div>
                 {{ scope.item.name}}
            </template>
        </my-list>
    </div>
</body>
<script>
// 列表组件
Vue.component('my-list', {
    props:['list','title'],
    template:`
    <div class='my-list'>
        <div class='title'>{{title}}</div>
        <div class="list">
            <div class="list-item" v-for="item in list">
                <slot :item="item"></slot>
            </div>
        </div>
    </div>`
});

// 布局组件  --子
Vue.component('soncom',{
    template:
        `<div>
            <p>作用域插槽</p>
            <slot :hero="hero"></slot>
        </div>`,
    data(){
        return {
            hero:{
                nickname:'迅捷斥候',
                truename:'temo'
            }
        }
    }
});

var vm = new Vue({
    el: "#app",
    data:{
        shapes: [ 
            { name: '正方形', sides: 4 }, 
            { name: '六边形', sides: 6 }, 
            { name: '三角形', sides: 3 }
        ],
        colors: [
            { name: '黄色', hex: '#F4D03F', },
            { name: '绿色', hex: '#229954' },
            { name: '粉色', hex: '#9B59B6' }
        ]
    }
});
</script>
</html>